<script setup>
import { ref } from 'vue';
import router from "@/router/index.js";

// 模拟数据
const job = ref({
  title: '岗位1',
  college: '计算机科学学院',
  plan: '珠峰引才',
  deadline: '2025-03-31 23:59:59',
  requirements: {
    education: '博士研究生',
    subject: '计算机科学与技术',
    quota: '3人',
    conditions: '年龄不超过35周岁，具有相关领域研究经验',
    remark: '特别优秀者可适当放宽条件'
  },
  description: {
    name: '教学科研岗',
    type: '事业编制',
    category: '专业技术岗',
    unit: '计算机科学学院',
    otherConditions: '需承担本科生教学工作',
    talentType: '优秀青年人才'
  },
  contact: {
    person: '张老师',
    phone: '028-8301XXXX',
    email: 'zhang@swpu.edu.cn',
    director: '李院长',
    directorPhone: '028-8302XXXX',
    directorEmail: 'li@swpu.edu.cn',
    address: '明理楼A区302室'
  }
});

const handleApply = () => {
  router.push('/index/jobApply')
};
</script>

<template>
  <div class="notice-container">
    <div class="breadcrumb">
      <router-link to="/index/jobs" class="link-style">招聘岗位</router-link>
      <span> > 详情</span>
    </div>

    <!-- 内容面板 -->
    <div class="content-panel">
      <!-- 标题区域 -->
      <div class="header">
        <h1 class="title">{{ job.title }}</h1>
        <button class="apply-btn" @click="handleApply">立即申请</button>
      </div>

      <!-- 基本信息 -->
      <div class="meta-info">
        <div class="left">
          {{ job.college }} | {{ job.plan }}
        </div>
        <div class="right">
          截止时间：{{ job.deadline }}
        </div>
      </div>

      <!-- 应聘条件 -->
      <div class="section">
        <div class="section-title">
          <div class="blue-line"></div>
          应聘条件
        </div>
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label">学历学位要求</td>
              <td>{{ job.requirements.education }}</td>
            </tr>
            <tr>
              <td class="label">学科要求</td>
              <td>{{ job.requirements.subject }}</td>
            </tr>
            <tr>
              <td class="label">拟招人数</td>
              <td>{{ job.requirements.quota }}</td>
            </tr>
            <tr>
              <td class="label">岗位条件及要求</td>
              <td>{{ job.requirements.conditions }}</td>
            </tr>
            <tr>
              <td class="label">备注</td>
              <td>{{ job.requirements.remark }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 岗位描述 -->
      <div class="section">
        <div class="section-title">
          <div class="blue-line"></div>
          岗位描述
        </div>
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label">岗位名称</td>
              <td>{{ job.description.name }}</td>
              <td class="label">招聘种类</td>
              <td>{{ job.description.type }}</td>
              <td class="label">岗位类别</td>
              <td>{{ job.description.category }}</td>
            </tr>
            <tr>
              <td class="label">招聘单位</td>
              <td colspan="5">{{ job.description.unit }}</td>
            </tr>
            <tr>
              <td class="label">其他条件和要求</td>
              <td colspan="5">{{ job.description.otherConditions }}</td>
            </tr>
            <tr>
              <td class="label">人才类型层次</td>
              <td colspan="5">{{ job.description.talentType }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 联系方式 -->
      <div class="section">
        <div class="section-title">
          <div class="blue-line"></div>
          联系方式
        </div>
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label">联系人</td>
              <td>{{ job.contact.person }}</td>
              <td class="label">电话</td>
              <td>{{ job.contact.phone }}</td>
              <td class="label">邮箱</td>
              <td>{{ job.contact.email }}</td>
            </tr>
            <tr>
              <td class="label">单位负责人</td>
              <td>{{ job.contact.director }}</td>
              <td class="label">电话</td>
              <td>{{ job.contact.directorPhone }}</td>
              <td class="label">邮箱</td>
              <td>{{ job.contact.directorEmail }}</td>
            </tr>
            <tr>
              <td class="label">办公地址</td>
              <td colspan="5">{{ job.contact.address }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  color: #1e3a8a;
  margin: 0;
}

.notice-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 40px 0;
}

.breadcrumb {
  width: 70%;
  margin: 0 auto 20px;
  color: #666;
  font-size: 14px;
}

.content-panel {
  background: white;
  width: 70%;
  margin: 0 auto;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  position: relative;
}

.link-style {
  color: #3b82f6;
  cursor: pointer;
  text-decoration: none;
}

.link-style:hover {
  text-decoration: underline;
}

.apply-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.apply-btn:hover {
  background: #2563eb;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.section {
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1e3a8a;
  margin-bottom: 20px;
}

.blue-line {
  width: 4px;
  height: 20px;
  background: #3b82f6;
  margin-right: 10px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.info-table td {
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.label {
  background: #f8fafc;
  font-weight: 500;
  width: 15%;
  min-width: 120px;
}

/* 响应式设计 */
/*@media (max-width: 768px) {
  .content-panel {
    width: 85%;
    padding: 20px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .meta-info {
    flex-direction: column;
    gap: 10px;
  }

  .info-table td {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .label {
    background: #f8fafc;
    font-weight: 600;
  }
}*/
</style>